<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - Shioa</title>
    <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Motion (Framer Motion) CDN -->
    <script src="https://cdn.jsdelivr.net/npm/motion@11.11.13/dist/motion.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            height: 100vh;
            overflow: hidden;
        }
        
        .split-container {
            display: flex;
            height: 100vh;
        }
        
        .left-panel {
            flex: 0 0 40%;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }
        
        .right-panel {
            flex: 1;
            background: #f8fafc;
            position: relative;
            overflow: hidden;
        }
        
        /* 左侧面板样式 */
        .brand-logo {
            position: absolute;
            top: 32px;
            left: 32px;
            font-size: 24px;
            font-weight: 600;
            color: #1f2937;
            opacity: 0;
        }
        
        .login-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 64px;
            max-width: 480px;
            margin: 0 auto;
            width: 100%;
            opacity: 0;
        }
        
        .login-title {
            font-size: 32px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 8px;
        }
        
        .login-subtitle {
            font-size: 16px;
            color: #6b7280;
            margin-bottom: 48px;
        }
        
        .form-group {
            margin-bottom: 24px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 8px;
        }
        
        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.2s ease;
            background: #ffffff;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .form-input::placeholder {
            color: #9ca3af;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
            margin-bottom: 32px;
        }
        
        .remember-me input {
            margin-right: 8px;
        }
        
        .remember-me label {
            font-size: 14px;
            color: #6b7280;
        }
        
        .login-button {
            width: 100%;
            background: #3b82f6;
            color: white;
            border: none;
            padding: 14px 24px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }
        
        .login-button:hover {
            background: #2563eb;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }
        
        .login-button:active {
            transform: translateY(0);
        }
        
        .login-button:disabled {
            background: #9ca3af;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .error-message {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #dc2626;
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 24px;
            font-size: 14px;
            opacity: 0;
            transform: translateY(-10px);
        }
        
        .error-message.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 右侧面板样式 */
        .demo-container {
            position: relative;
            height: 100%;
            padding: 48px;
            display: flex;
            flex-direction: column;
            opacity: 0;
        }
        
        .demo-image {
            flex: 1;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            overflow: hidden;
            position: relative;
            border: 1px solid #e5e7eb;
        }
        
        .demo-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
        }
        
        .demo-description {
            margin-top: 32px;
            text-align: center;
            opacity: 0;
        }
        
        .demo-description h3 {
            font-size: 24px;
            font-weight: 600;
            color: #1f2937;
            margin-bottom: 8px;
        }
        
        .demo-description p {
            font-size: 16px;
            color: #6b7280;
            line-height: 1.6;
        }
        
        /* 背景动画 */
        .bg-animation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        
        .floating-shape {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
            opacity: 0.05;
            animation: float 6s ease-in-out infinite;
        }
        
        .shape-1 { width: 120px; height: 120px; top: 10%; left: 10%; animation-delay: 0s; }
        .shape-2 { width: 80px; height: 80px; top: 60%; left: 15%; animation-delay: 2s; }
        .shape-3 { width: 100px; height: 100px; top: 30%; left: 80%; animation-delay: 4s; }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .split-container {
                flex-direction: column;
            }
            
            .left-panel {
                flex: 0 0 100%;
            }
            
            .right-panel {
                display: none;
            }
            
            .login-content {
                padding: 0 32px;
            }
            
            .brand-logo {
                left: 32px;
            }
        }
        
        /* 加载动画 */
        .loading-dots {
            display: inline-flex;
            align-items: center;
        }
        
        .loading-dots::after {
            content: '';
            display: inline-block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: currentColor;
            margin-left: 8px;
            animation: loading-dots 1.4s infinite ease-in-out;
        }
        
        @keyframes loading-dots {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <div class="split-container">
        <!-- 左侧登录面板 -->
        <div class="left-panel">
            <!-- 背景动画 -->
            <div class="bg-animation">
                <div class="floating-shape shape-1"></div>
                <div class="floating-shape shape-2"></div>
                <div class="floating-shape shape-3"></div>
            </div>
            
            <!-- 品牌Logo -->
            <div class="brand-logo" id="brandLogo">Shioa</div>
            
            <!-- 登录内容 -->
            <div class="login-content" id="loginContent">
                <h1 class="login-title">登录</h1>
                <p class="login-subtitle">欢迎回来！登录访问您的智能数据分析平台</p>
                
                <!-- 错误信息 -->
                <div class="error-message" id="errorMessage"></div>
                
                <!-- 登录表单 -->
                <form id="loginForm">
                    <div class="form-group">
                        <label class="form-label" for="username">用户名或邮箱</label>
                        <input 
                            type="text" 
                            id="username" 
                            name="username" 
                            class="form-input"
                            placeholder="请输入用户名或邮箱"
                            required
                        >
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="password">密码</label>
                        <input 
                            type="password" 
                            id="password" 
                            name="password" 
                            class="form-input"
                            placeholder="请输入密码"
                            required
                        >
                    </div>
                    
                    <div class="remember-me">
                        <input type="checkbox" id="remember" name="remember">
                        <label for="remember">记住我</label>
                    </div>
                    
                    <button type="submit" class="login-button" id="loginButton">
                        <span id="loginButtonText">登录</span>
                        <span id="loginButtonLoading" class="loading-dots hidden">登录中</span>
                    </button>
                </form>
            </div>
        </div>
        
        <!-- 右侧展示面板 -->
        <div class="right-panel">
            <div class="demo-container" id="demoContainer">
                <div class="demo-image">
                    <img src="" 
                         alt="YouTube Analytics Dashboard" 
                         id="demoImage"
                         style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                </div>
                
                <div class="demo-description" id="demoDescription">
                    <h3>强大的YouTube数据分析</h3>
                    <p>Shioa为您提供全面的数据分析服务，帮助您优化内容策略，提升频道表现。</p>
                </div>
            </div>
        </div>
    </div>    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            initAnimations();
            setupFormHandlers();
            loadDemoImage();
        });

        function initAnimations() {
            const { animate, stagger } = Motion;
            
            // 品牌Logo动画
            animate('#brandLogo', 
                { opacity: [0, 1], x: [-20, 0] },
                { duration: 0.8, ease: 'easeOut' }
            );
            
            // 登录内容动画
            animate('#loginContent', 
                { opacity: [0, 1], y: [30, 0] },
                { duration: 0.8, delay: 0.2, ease: 'easeOut' }
            );
            
            // 表单元素错列动画
            animate('.form-group', 
                { opacity: [0, 1], x: [-20, 0] },
                { duration: 0.6, delay: stagger(0.1, { start: 0.4 }) }
            );
            
            // 记住我和按钮动画
            animate('.remember-me, .login-button', 
                { opacity: [0, 1], y: [20, 0] },
                { duration: 0.6, delay: stagger(0.1, { start: 0.8 }) }
            );
            
            // 右侧演示区域动画
            animate('#demoContainer', 
                { opacity: [0, 1], x: [50, 0] },
                { duration: 1, delay: 0.5, ease: 'easeOut' }
            );
            
            // 演示描述动画
            animate('#demoDescription', 
                { opacity: [0, 1], y: [20, 0] },
                { duration: 0.8, delay: 1.2 }
            );
            
            // 输入框焦点动画
            document.querySelectorAll('.form-input').forEach(input => {
                input.addEventListener('focus', () => {
                    animate(input, 
                        { scale: [1, 1.02] },
                        { duration: 0.2 }
                    );
                });
                
                input.addEventListener('blur', () => {
                    animate(input, 
                        { scale: [1.02, 1] },
                        { duration: 0.2 }
                    );
                });
            });
        }

        function loadDemoImage() {
            // 创建一个临时的canvas来绘制演示图片
            const canvas = document.createElement('canvas');
            canvas.width = 800;
            canvas.height = 600;
            const ctx = canvas.getContext('2d');
            
            // 绘制模拟的YouTube Analytics界面
            // 背景
            ctx.fillStyle = '#f8fafc';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 顶部标题栏
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, canvas.width, 60);
            ctx.fillStyle = '#1f2937';
            ctx.font = 'bold 16px -apple-system, BlinkMacSystemFont, sans-serif';
            ctx.fillText('YouTube Analytics', 20, 35);
            
            // 数据卡片
            const cards = [
                { title: '日收入排行', value: '$923.09', color: '#10b981' },
                { title: '月收入排行', value: '$20,041.42', color: '#3b82f6' },
                { title: '日新增订阅', value: '+2.0K', color: '#8b5cf6' },
                { title: '月新增订阅', value: '+27.0K', color: '#f59e0b' }
            ];
            
            cards.forEach((card, index) => {
                const x = 20 + index * 190;
                const y = 100;
                
                // 卡片背景
                ctx.fillStyle = '#ffffff';
                ctx.roundRect(x, y, 170, 120, 8);
                ctx.fill();
                
                // 卡片标题
                ctx.fillStyle = '#6b7280';
                ctx.font = '12px -apple-system, BlinkMacSystemFont, sans-serif';
                ctx.fillText(card.title, x + 15, y + 25);
                
                // 卡片数值
                ctx.fillStyle = card.color;
                ctx.font = 'bold 24px -apple-system, BlinkMacSystemFont, sans-serif';
                ctx.fillText(card.value, x + 15, y + 60);
                
                // 小图标
                ctx.fillStyle = card.color;
                ctx.fillRect(x + 15, y + 80, 20, 4);
            });
            
            // 数据列表
            const listY = 250;
            ctx.fillStyle = '#ffffff';
            ctx.roundRect(20, listY, canvas.width - 40, 300, 8);
            ctx.fill();
            
            // 列表标题
            ctx.fillStyle = '#1f2937';
            ctx.font = 'bold 16px -apple-system, BlinkMacSystemFont, sans-serif';
            ctx.fillText('频道收入排行', 35, listY + 30);
            
            // 列表项
            const channels = [
                'Starter Story', 'AI Search', '蛋小黄', 'Julian Goldie', 'Tom财经视角'
            ];
            
            channels.forEach((channel, index) => {
                const itemY = listY + 60 + index * 40;
                ctx.fillStyle = '#6b7280';
                ctx.font = '14px -apple-system, BlinkMacSystemFont, sans-serif';
                ctx.fillText(`${index + 1}`, 50, itemY);
                ctx.fillText(channel, 80, itemY);
                
                // 收入数值
                ctx.fillStyle = '#10b981';
                const earnings = ['$923.09', '$638.87', '$629.42', '$535.23', '$241.82'];
                ctx.fillText(earnings[index], canvas.width - 150, itemY);
            });
            
            // 将canvas转换为图片并设置到img元素
            const demoImage = document.getElementById('demoImage');
            demoImage.src = canvas.toDataURL();
            demoImage.style.background = 'none';
        }

        function setupFormHandlers() {
            const loginForm = document.getElementById('loginForm');
            const errorMessage = document.getElementById('errorMessage');
            const loginButton = document.getElementById('loginButton');
            const loginButtonText = document.getElementById('loginButtonText');
            const loginButtonLoading = document.getElementById('loginButtonLoading');

            function showError(message) {
                errorMessage.textContent = message;
                errorMessage.classList.add('show');
                
                const { animate } = Motion;
                animate(errorMessage, 
                    { opacity: [0, 1], y: [-10, 0] },
                    { duration: 0.3 }
                );
            }

            function hideError() {
                errorMessage.classList.remove('show');
            }

            function setLoading(isLoading) {
                if (isLoading) {
                    loginButton.disabled = true;
                    loginButtonText.classList.add('hidden');
                    loginButtonLoading.classList.remove('hidden');
                } else {
                    loginButton.disabled = false;
                    loginButtonText.classList.remove('hidden');
                    loginButtonLoading.classList.add('hidden');
                }
            }

            async function login(username, password, rememberMe) {
                try {
                    const response = await fetch(`${API_BASE_URL}/auth/login`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            username: username,
                            password: password,
                            remember_me: rememberMe
                        })
                    });

                    const data = await response.json();

                    if (data.success) {
                        console.log('✅ [Login] 登录成功，响应数据:', data);
                        
                        // 成功动画
                        const { animate } = Motion;
                        animate(loginButton, 
                            { scale: [1, 1.05, 1], backgroundColor: ['#3b82f6', '#10b981', '#10b981'] },
                            { duration: 0.6 }
                        );
                        
                        // 保存token
                        localStorage.setItem('access_token', data.access_token);
                        localStorage.setItem('user_info', JSON.stringify(data.user));
                        
                        // 页面退出动画
                        animate('.login-content', 
                            { opacity: [1, 0], x: [0, -50] },
                            { duration: 0.5 }
                        );
                        
                        animate('#demoContainer', 
                            { opacity: [1, 0], x: [0, 50] },
                            { duration: 0.5 }
                        );
                        
                        // 跳转到主页
                        setTimeout(() => {
                            window.location.href = '/';
                        }, 800);
                    } else {
                        showError(data.message || '登录失败，请重试');
                    }
                } catch (error) {
                    console.error('登录错误:', error);
                    showError('网络错误，请检查连接后重试');
                }
            }

            loginForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                hideError();
                setLoading(true);

                const formData = new FormData(loginForm);
                const username = formData.get('username').trim();
                const password = formData.get('password');
                const rememberMe = formData.get('remember') === 'on';

                if (!username || !password) {
                    showError('请填写所有必填字段');
                    setLoading(false);
                    return;
                }

                try {
                    await login(username, password, rememberMe);
                } catch (error) {
                    showError('登录失败，请重试');
                } finally {
                    setLoading(false);
                }
            });

            // 检查是否已登录
            const token = localStorage.getItem('access_token');
            if (token) {
                fetch(`${API_BASE_URL}/auth/verify`, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.location.href = '/';
                    }
                })
                .catch(() => {
                    localStorage.removeItem('access_token');
                    localStorage.removeItem('user_info');
                });
            }
        }

        // Canvas圆角矩形扩展
        CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius) {
            this.beginPath();
            this.moveTo(x + radius, y);
            this.arcTo(x + width, y, x + width, y + height, radius);
            this.arcTo(x + width, y + height, x, y + height, radius);
            this.arcTo(x, y + height, x, y, radius);
            this.arcTo(x, y, x + width, y, radius);
            this.closePath();
        };
    </script>
    <script src="js/config.js"></script>
    <script src="js/api.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/env.js"></script>
</body>
</html>